<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>赠送礼物页面 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/css/fontawesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #e91e63;
    }
    
    /* 接收对象对象信息 */
    .gift-recipient {
      background-color: white;
      padding: 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .recipient-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      border: 2px solid #fce4ec;
    }
    
    .recipient-info {
      flex: 1;
    }
    
    .recipient-name {
      font-weight: 600;
      font-size: 17px;
      margin: 0 0 5px 0;
    }
    
    .recipient-status {
      font-size: 13px;
      color: #666;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #e91e63;
      color: white;
    }
    
    /* 通用礼物页面页面样式 */
    .gift-page {
      display: none;
    }
    
    .gift-page.active {
      display: block;
    }
    
    /* 分类栏 */
    .category-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
      overflow-x: auto;
    }
    
    .category-item {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .category-item.active {
      background-color: #e91e63;
      color: white;
    }
    
    /* 礼物标签 */
    .gift-tag {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }
    
    .tag-popular {
      background-color: #ffebee;
      color: #c62828;
    }
    
    .tag-rare {
      background-color: #e8f5e9;
      color: #2e7d32;
    }
    
    .tag-new {
      background-color: #e0f7fa;
      color: #00695c;
    }
    
    /* 价格标签 */
    .gift-price {
      color: #e91e63;
      font-weight: 600;
    }
    
    /* 赠送按钮 */
    .send-btn {
      background-color: #e91e63;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .send-btn:hover {
      background-color: #d81b60;
    }
    
    /* 样式1 - 卡片视图 */
    .card-view {
      padding: 15px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    
    .gift-card {
      background-color: white;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .gift-card-image {
      width: 80px;
      height: 80px;
      margin: 0 auto 10px;
      border-radius: 8px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #e91e63;
    }
    
    .gift-card-name {
      font-weight: 500;
      font-size: 15px;
      margin: 0 0 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .gift-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #f5f7fa;
    }
    
    /* 样式2 - 列表视图 */
    .list-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .gift-list-item {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    
    .list-gift-image {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #e91e63;
      margin-right: 12px;
    }
    
    .list-gift-info {
      flex: 1;
      min-width: 0;
    }
    
    .list-gift-name {
      font-weight: 500;
      font-size: 15px;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .list-gift-desc {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .list-gift-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .quantity-control {
      display: flex;
      align-items: center;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    
    .quantity-btn {
      width: 24px;
      height: 24px;
      background: none;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
    
    .quantity-input {
      width: 30px;
      height: 24px;
      border: none;
      text-align: center;
      font-size: 14px;
      padding: 0;
      -moz-appearance: textfield;
    }
    
    .quantity-input::-webkit-outer-spin-button,
    .quantity-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    /* 样式3 - 详情视图 */
    .detail-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .detail-gift-item {
      background-color: white;
      margin-bottom: 15px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .detail-gift-header {
      padding: 15px;
      display: flex;
    }
    
    .detail-gift-image {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: #e91e63;
      margin-right: 15px;
    }
    
    .detail-gift-info {
      flex: 1;
    }
    
    .detail-gift-name {
      font-weight: 600;
      font-size: 18px;
      margin: 0 0 5px 0;
    }
    
    .detail-gift-tags {
      display: flex;
      gap: 5px;
      margin-bottom: 8px;
    }
    
    .detail-gift-price {
      font-size: 16px;
      color: #e91e63;
      font-weight: 600;
    }
    
    .detail-gift-desc {
      padding: 0 15px 15px;
      font-size: 14px;
      color: #666;
      border-top: 1px solid #f5f7fa;
    }
    
    .detail-gift-footer {
      padding: 12px 15px;
      background-color: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #f5f7fa;
    }
    
    .detail-quantity-control {
      display: flex;
      align-items: center;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    
    .detail-quantity-btn {
      width: 30px;
      height: 30px;
      background: none;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #666;
      cursor: pointer;
    }
    
    .detail-quantity-input {
      width: 40px;
      height: 30px;
      border: none;
      text-align: center;
      font-size: 16px;
      padding: 0;
      -moz-appearance: textfield;
    }
    
    .detail-quantity-input::-webkit-outer-spin-button,
    .detail-quantity-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    .detail-send-btn {
      background-color: #e91e63;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 8px 20px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    /* 样式4 - 分类网格视图 */
    .category-grid-view {
      padding-bottom: 20px;
    }
    
    .category-section {
      margin-bottom: 20px;
    }
    
    .category-section-title {
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .category-gifts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 0 10px;
    }
    
    .category-gift-item {
      background-color: white;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .category-gift-image {
      width: 60px;
      height: 60px;
      margin: 0 auto 8px;
      border-radius: 6px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #e91e63;
    }
    
    .category-gift-name {
      font-size: 13px;
      font-weight: 500;
      margin: 0 0 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .category-gift-price {
      font-size: 12px;
      color: #e91e63;
      margin-bottom: 5px;
    }
    
    .category-send-btn {
      background-color: #e91e63;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 3px 0;
      font-size: 12px;
      width: 100%;
      cursor: pointer;
    }
    
    /* 赠送弹窗 (默认隐藏) */
    .gift-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      justify-content: center;
      align-items: flex-end;
      z-index: 1000;
    }
    
    .gift-modal.active {
      display: flex;
    }
    
    .modal-content {
      background-color: white;
      width: 100%;
      border-radius: 16px 16px 0 0;
      padding: 20px 15px;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-modal {
      background: none;
      border: none;
      font-size: 24px;
      color: #666;
      cursor: pointer;
    }
    
    .message-input {
      width: 100%;
      padding: 12px;
      border: 1px solid #eee;
      border-radius: 8px;
      font-size: 14px;
      resize: none;
      margin-bottom: 15px;
      min-height: 80px;
    }
    
    .modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;
      border-top: 1px solid #f5f7fa;
    }
    
    .total-price {
      font-size: 16px;
      color: #e91e63;
      font-weight: 600;
    }
    
    .confirm-send-btn {
      background-color: #e91e63;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 赠送弹窗 -->
  <div class="gift-modal" id="giftModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">赠送礼物</h3>
        <button class="close-modal" id="closeModal">&times;</button>
      </div>
      <div>
        <p style="font-size: 14px; color: #666; margin-bottom: 10px;">给 李小明 留言：</p>
        <textarea class="message-input" placeholder="输入你想对TA说的话..."></textarea>
        
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
          <div style="font-size: 14px; color: #666; margin-right: 10px;">赠送数量：</div>
          <div class="quantity-control">
            <button class="quantity-btn" id="modalMinus">-</button>
            <input type="number" class="quantity-input" value="1" min="1" id="modalQuantity">
            <button class="quantity-btn" id="modalPlus">+</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="total-price">总价：¥<span id="modalTotalPrice">99</span></div>
        <button class="confirm-send-btn" id="confirmSendBtn">确认赠送</button>
      </div>
    </div>
  </div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">赠送礼物</h1>
    <a href="#" class="nav-btn primary" id="moreBtn">
      <i class="fa fa-ellipsis-v"></i>
    </a>
  </nav>
  
  <!-- 收礼对象信息 -->
  <div class="gift-recipient">
    <img src="https://picsum.photos/seed/user1/100/100" alt="收礼人头像" class="recipient-avatar">
    <div class="recipient-info">
      <h2 class="recipient-name">李小明</h2>
      <div class="recipient-status">在线 · 可以赠送礼物表达心意</div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="card">卡片视图</div>
      <div class="style-tab" data-style="list">列表视图</div>
      <div class="style-tab" data-style="detail">详情视图</div>
      <div class="style-tab" data-style="category">分类视图</div>
    </div>
  </div>
  
  <!-- 分类栏 -->
  <div class="category-bar">
    <div class="category-item active">全部礼物</div>
    <div class="category-item">热门推荐</div>
    <div class="category-item">虚拟礼物</div>
    <div class="category-item">实物礼物</div>
    <div class="category-item">节日限定</div>
    <div class="category-item">轻奢礼品</div>
  </div>
  
  <!-- 样式1 - 卡片视图 -->
  <div class="gift-page active" id="card">
    <div class="card-view">
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-gift"></i>
        </div>
        <h3 class="gift-card-name">浪漫玫瑰花束</h3>
        <div>
          <span class="gift-tag tag-popular">热门</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥99</span>
          <button class="send-btn gift-action" data-name="浪漫玫瑰花束" data-price="99">赠送</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-diamond"></i>
        </div>
        <h3 class="gift-card-name">水晶音乐盒</h3>
        <div>
          <span class="gift-tag tag-rare">稀有</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥199</span>
          <button class="send-btn gift-action" data-name="水晶音乐盒" data-price="199">赠送</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-music"></i>
        </div>
        <h3 class="gift-card-name">数字音乐会员</h3>
        <div>
          <span class="gift-tag tag-popular">热门</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥30</span>
          <button class="send-btn gift-action" data-name="数字音乐会员" data-price="30">赠送</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-book"></i>
        </div>
        <h3 class="gift-card-name">精选散文合集</h3>
        <div>
          <span class="gift-tag tag-new">新品</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥59</span>
          <button class="send-btn gift-action" data-name="精选散文合集" data-price="59">赠送</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-coffee"></i>
        </div>
        <h3 class="gift-card-name">星巴克咖啡券</h3>
        <div>
          <span class="gift-tag tag-popular">热门</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥35</span>
          <button class="send-btn gift-action" data-name="星巴克咖啡券" data-price="35">赠送</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-card-image">
          <i class="fa fa-gamepad"></i>
        </div>
        <h3 class="gift-card-name">游戏充值卡</h3>
        <div>
          <span class="gift-tag tag-popular">热门</span>
        </div>
        <div class="gift-card-footer">
          <span class="gift-price">¥100</span>
          <button class="send-btn gift-action" data-name="游戏充值卡" data-price="100">赠送</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 列表视图 -->
  <div class="gift-page" id="list">
    <ul class="list-view">
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-gift"></i>
        </div>
        <div class="list-gift-info">
          <h3 class="list-gift-name">浪漫玫瑰花束</h3>
          <div class="list-gift-desc">
            <span class="gift-tag tag-popular">热门</span>
            <span>表达爱意的经典之选</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <div class="quantity-control">
            <button class="quantity-btn minus">-</button>
            <input type="number" class="quantity-input" value="1" min="1">
            <button class="quantity-btn plus">+</button>
          </div>
          <span class="gift-price">¥99</span>
          <button class="send-btn gift-action" data-name="浪漫玫瑰花束" data-price="99">赠</button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-diamond"></i>
        </div>
        <div class="list-gift-info">
          <h3 class="list-gift-name">水晶音乐盒</h3>
          <div class="list-gift-desc">
            <span class="gift-tag tag-rare">稀有</span>
            <span>定制音乐，珍藏美好回忆</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <div class="quantity-control">
            <button class="quantity-btn minus">-</button>
            <input type="number" class="quantity-input" value="1" min="1">
            <button class="quantity-btn plus">+</button>
          </div>
          <span class="gift-price">¥199</span>
          <button class="send-btn gift-action" data-name="水晶音乐盒" data-price="199">赠</button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-music"></i>
        </div>
        <div class="list-gift-info">
          <h3 class="list-gift-name">数字音乐会员</h3>
          <div class="list-gift-desc">
            <span class="gift-tag tag-popular">热门</span>
            <span>30天音乐畅听特权</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <div class="quantity-control">
            <button class="quantity-btn minus">-</button>
            <input type="number" class="quantity-input" value="1" min="1">
            <button class="quantity-btn plus">+</button>
          </div>
          <span class="gift-price">¥30</span>
          <button class="send-btn gift-action" data-name="数字音乐会员" data-price="30">赠</button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-book"></i>
        </div>
        <div class="list-gift-info">
          <h3 class="list-gift-name">精选散文合集</h3>
          <div class="list-gift-desc">
            <span class="gift-tag tag-new">新品</span>
            <span>精选50篇经典散文作品</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <div class="quantity-control">
            <button class="quantity-btn minus">-</button>
            <input type="number" class="quantity-input" value="1" min="1">
            <button class="quantity-btn plus">+</button>
          </div>
          <span class="gift-price">¥59</span>
          <button class="send-btn gift-action" data-name="精选散文合集" data-price="59">赠</button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式3 - 详情视图 -->
  <div class="gift-page" id="detail">
    <ul class="detail-view">
      <li class="detail-gift-item">
        <div class="detail-gift-header">
          <div class="detail-gift-image">
            <i class="fa fa-gift"></i>
          </div>
          <div class="detail-gift-info">
            <h3 class="detail-gift-name">浪漫玫瑰花束</h3>
            <div class="detail-gift-tags">
              <span class="gift-tag tag-popular">热门</span>
              <span class="gift-tag tag-new">新品</span>
            </div>
            <div class="detail-gift-price">¥99</div>
          </div>
        </div>
        <div class="detail-gift-desc">
          精选19枝红玫瑰，搭配尤加利叶和满天星，黑色包装纸包装，附赠精美贺卡。象征爱情的经典花束，适合生日、纪念日等重要场合赠送，表达浓浓的爱意与祝福。
        </div>
        <div class="detail-gift-footer">
          <div>
            <div style="font-size: 12px; color: #666; margin-bottom: 5px;">购买数量</div>
            <div class="detail-quantity-control">
              <button class="detail-quantity-btn minus">-</button>
              <input type="number" class="detail-quantity-input" value="1" min="1">
              <button class="detail-quantity-btn plus">+</button>
            </div>
          </div>
          <button class="detail-send-btn gift-action" data-name="浪漫玫瑰花束" data-price="99">赠送礼物</button>
        </div>
      </li>
      
      <li class="detail-gift-item">
        <div class="detail-gift-header">
          <div class="detail-gift-image">
            <i class="fa fa-diamond"></i>
          </div>
          <div class="detail-gift-info">
            <h3 class="detail-gift-name">水晶音乐盒</h3>
            <div class="detail-gift-tags">
              <span class="gift-tag tag-rare">稀有</span>
            </div>
            <div class="detail-gift-price">¥199</div>
          </div>
        </div>
        <div class="detail-gift-desc">
          水晶材质音乐盒，内置经典音乐《致爱丽丝》，可定制刻字服务。透明水晶折射出绚丽光彩，音乐悠扬动听，是珍藏美好回忆的绝佳礼物，适合送给特别的人。
        </div>
        <div class="detail-gift-footer">
          <div>
            <div style="font-size: 12px; color: #666; margin-bottom: 5px;">购买数量</div>
            <div class="detail-quantity-control">
              <button class="detail-quantity-btn minus">-</button>
              <input type="number" class="detail-quantity-input" value="1" min="1">
              <button class="detail-quantity-btn plus">+</button>
            </div>
          </div>
          <button class="detail-send-btn gift-action" data-name="水晶音乐盒" data-price="199">赠送礼物</button>
        </div>
      </li>
      
      <li class="detail-gift-item">
        <div class="detail-gift-header">
          <div class="detail-gift-image">
            <i class="fa fa-music"></i>
          </div>
          <div class="detail-gift-info">
            <h3 class="detail-gift-name">数字音乐会员</h3>
            <div class="detail-gift-tags">
              <span class="gift-tag tag-popular">热门</span>
            </div>
            <div class="detail-gift-price">¥30</div>
          </div>
        </div>
        <div class="detail-gift-desc">
          30天高级音乐会员，享受无损音质、免广告、独家歌曲等特权。直接激活到账，无需等待物流，是音乐爱好者的理想礼物选择。
        </div>
        <div class="detail-gift-footer">
          <div>
            <div style="font-size: 12px; color: #666; margin-bottom: 5px;">购买数量</div>
            <div class="detail-quantity-control">
              <button class="detail-quantity-btn minus">-</button>
              <input type="number" class="detail-quantity-input" value="1" min="1">
              <button class="detail-quantity-btn plus">+</button>
            </div>
          </div>
          <button class="detail-send-btn gift-action" data-name="数字音乐会员" data-price="30">赠送礼物</button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式4 - 分类网格视图 -->
  <div class="gift-page" id="category">
    <div class="category-grid-view">
      <!-- 热门推荐分类 -->
      <div class="category-section">
        <div class="category-section-title">热门推荐</div>
        <div class="category-gifts">
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-gift"></i>
            </div>
            <h3 class="category-gift-name">浪漫玫瑰花束</h3>
            <div class="category-gift-price">¥99</div>
            <button class="category-send-btn gift-action" data-name="浪漫玫瑰花束" data-price="99">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-coffee"></i>
            </div>
            <h3 class="category-gift-name">星巴克咖啡券</h3>
            <div class="category-gift-price">¥35</div>
            <button class="category-send-btn gift-action" data-name="星巴克咖啡券" data-price="35">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-music"></i>
            </div>
            <h3 class="category-gift-name">数字音乐会员</h3>
            <div class="category-gift-price">¥30</div>
            <button class="category-send-btn gift-action" data-name="数字音乐会员" data-price="30">赠送</button>
          </div>
        </div>
      </div>
      
      <!-- 虚拟礼物分类 -->
      <div class="category-section">
        <div class="category-section-title">虚拟礼物</div>
        <div class="category-gifts">
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-gamepad"></i>
            </div>
            <h3 class="category-gift-name">游戏充值卡</h3>
            <div class="category-gift-price">¥100</div>
            <button class="category-send-btn gift-action" data-name="游戏充值卡" data-price="100">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-film"></i>
            </div>
            <h3 class="category-gift-name">电影票两张</h3>
            <div class="category-gift-price">¥80</div>
            <button class="category-send-btn gift-action" data-name="电影票两张" data-price="80">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-shopping-bag"></i>
            </div>
            <h3 class="category-gift-name">品牌购物卡</h3>
            <div class="category-gift-price">¥200</div>
            <button class="category-send-btn gift-action" data-name="品牌购物卡" data-price="200">赠送</button>
          </div>
        </div>
      </div>
      
      <!-- 实物礼物分类 -->
      <div class="category-section">
        <div class="category-section-title">实物礼物</div>
        <div class="category-gifts">
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-diamond"></i>
            </div>
            <h3 class="category-gift-name">水晶音乐盒</h3>
            <div class="category-gift-price">¥199</div>
            <button class="category-send-btn gift-action" data-name="水晶音乐盒" data-price="199">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-book"></i>
            </div>
            <h3 class="category-gift-name">精选散文合集</h3>
            <div class="category-gift-price">¥59</div>
            <button class="category-send-btn gift-action" data-name="精选散文合集" data-price="59">赠送</button>
          </div>
          
          <div class="category-gift-item">
            <div class="category-gift-image">
              <i class="fa fa-paint-brush"></i>
            </div>
            <h3 class="category-gift-name">手绘艺术画</h3>
            <div class="category-gift-price">¥299</div>
            <button class="category-send-btn gift-action" data-name="手绘艺术画" data-price="299">赠送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const giftPages = document.querySelectorAll('.gift-page');
    const categoryItems = document.querySelectorAll('.category-item');
    const actionBtns = document.querySelectorAll('.gift-action');
    const backBtn = document.getElementById('backBtn');
    const moreBtn = document.getElementById('moreBtn');
    const giftModal = document.getElementById('giftModal');
    const closeModal = document.getElementById('closeModal');
    const confirmSendBtn = document.getElementById('confirmSendBtn');
    const modalMinus = document.getElementById('modalMinus');
    const modalPlus = document.getElementById('modalPlus');
    const modalQuantity = document.getElementById('modalQuantity');
    const modalTotalPrice = document.getElementById('modalTotalPrice');
    const toast = document.getElementById('toast');
    
    // 当前选中的礼物信息
    let currentGift = {
      name: '',
      price: 0
    };
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        giftPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 分类切换
    categoryItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除所有激活状态
        categoryItems.forEach(i => i.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        
        showToast(`已选择${this.textContent}`);
      });
    });
    
    // 数量控制
    document.querySelectorAll('.quantity-btn.plus, .detail-quantity-btn.plus').forEach(btn => {
      btn.addEventListener('click', function() {
        const input = this.parentElement.querySelector('input');
        input.value = parseInt(input.value) + 1;
      });
    });
    
    document.querySelectorAll('.quantity-btn.minus, .detail-quantity-btn.minus').forEach(btn => {
      btn.addEventListener('click', function() {
        const input = this.parentElement.querySelector('input');
        if (parseInt(input.value) > 1) {
          input.value = parseInt(input.value) - 1;
        }
      });
    });
    
    // 弹窗数量控制
    modalPlus.addEventListener('click', function() {
      modalQuantity.value = parseInt(modalQuantity.value) + 1;
      updateTotalPrice();
    });
    
    modalMinus.addEventListener('click', function() {
      if (parseInt(modalQuantity.value) > 1) {
        modalQuantity.value = parseInt(modalQuantity.value) - 1;
        updateTotalPrice();
      }
    });
    
    modalQuantity.addEventListener('input', function() {
      if (this.value < 1 || isNaN(this.value)) {
        this.value = 1;
      }
      updateTotalPrice();
    });
    
    // 更新总价
    function updateTotalPrice() {
      const total = currentGift.price * parseInt(modalQuantity.value);
      modalTotalPrice.textContent = total;
    }
    
    // 打开赠送弹窗
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        currentGift.name = this.getAttribute('data-name');
        currentGift.price = parseInt(this.getAttribute('data-price'));
        
        // 更新弹窗信息
        modalQuantity.value = 1;
        updateTotalPrice();
        
        // 显示弹窗
        giftModal.classList.add('active');
      });
    });
    
    // 关闭赠送弹窗
    closeModal.addEventListener('click', function() {
      giftModal.classList.remove('active');
    });
    
    // 点击弹窗外部关闭
    giftModal.addEventListener('click', function(e) {
      if (e.target === this) {
        giftModal.classList.remove('active');
      }
    });
    
    // 确认赠送
    confirmSendBtn.addEventListener('click', function() {
      const quantity = parseInt(modalQuantity.value);
      const message = document.querySelector('.message-input').value;
      
      let messageText = message ? `，附言："${message}"` : '';
      showToast(`已成功赠送${quantity}个${currentGift.name}给李小明${messageText}`);
      
      // 关闭弹窗
      giftModal.classList.remove('active');
      
      // 清空留言
      document.querySelector('.message-input').value = '';
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 更多按钮点击事件
    moreBtn.addEventListener('click', function() {
      showToast('更多选项');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
